// webpack.config.js是webpack的配置文件
const { resolve } = require("path");// 导入node.js中内置path路径模块
// path路径模块中有一个方法 resolve() 拼接路径字符串


// 引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
    // webpack的5个核心概念

    // 入口
    entry: "./src/index.js",

    // 输出
    output: {
         
        environment: {
            // The environment supports arrow functions ('() => { ... }').
            // 环境支持箭头函数('()=>{…}”)。
            arrowFunction: false,
            // The environment supports BigInt as literal (123n).
            // 该环境支持将BigInt作为文字(123n)。
            bigIntLiteral: false,
            // The environment supports const and let for variable declarations.
            // 环境支持使用const和let声明变量。
            const: false,
            // The environment supports destructuring ('{ a, b } = obj').
            destructuring: false,
            // The environment supports an async import() function to import EcmaScript modules.
            // 该环境支持async import()函数来导入EcmaScript模块。
            dynamicImport: false,
            // The environment supports 'for of' iteration ('for (const x of array) { ... }').
            // 该环境支持'for of' iteration ('for (const x of array){…}”)
            forOf: false,
            // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
            // 该环境支持ECMAScript Module语法来导入ECMAScript模块
            module: false,
        },

        // 输出文件名
        filename:"built.js",
        // 输出路径
        // __dirname是nodejs中的变量,代表当前文件所在目录对应的绝对路径
        path: resolve(__dirname, "build")
    },

    // 加载器loader
    // loader的配置
    module:{
        rules:[
            // 详细的loader配置

            {
                // 配置css-loader
                // 注意: use数组中的loader执行顺序是: 从右到左  或  从下到下,依次执行的
                // test属性表示匹配哪些文件,属性取值一般是一个正则表达式
                test:/\.css$/,
                // use表示使用哪些loader进行处理
                use:[
                    // use数组中的loader执行顺序是: 从右到左或从下到下,依次执行的
                    // 创建style标签,将js中的样式资源插入这个style标签中,再把style标签添加到页面head标签中生效
                    "style-loader",
                    // 将css文件变成commonjs模块加载到js文件中,里面内容是样式字符串
                    "css-loader",
                    // 配置postcss自动添加css的兼容前缀
                    "postcss-loader"
                ]
            },


            {
                // 不同文件需要配置不同的loader处理
                // 处理less资源
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    // 将less文件编译成css文件
                    "less-loader",
                    // 配置postcss自动添加css的兼容前缀
                    "postcss-loader"
                ]
            },


            

            // 处理.scss资源
            {
                test:/\.scss$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                    // 配置postcss自动添加css的兼容前缀
                    "postcss-loader"
                ]
            },


            {
                // 处理CSS中的背景图片资源
                test: /\.(jpg|jpeg|png|gif|bmp|webp)$/,
                type:"asset",
                //解析
                parser: {
                    // 转base64的条件
                    // 图片大小如果小于8kb,就会被base64处理
                    // base64的优点:减少请求数量,减轻服务器压力
                    // base64的缺点:图片体积会更大,文件请求速度更慢
                    dataUrlCondition: {
                        maxSize: 1 * 1024, // 8kb
                    }
                },
                generator:{ 
                    //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                    // 给图片进行重命名 [hash:10]取图片的hash的前10为,[ext]取文件原来的扩展名
                    // filename:'images/[hash:10][ext]',
                    //原来的命名
                    filename:'images/[name][ext]',
                    //打包后对资源的引入，文件命名已经有/images了
                    publicPath:'./'
                },
            },
        
            {
                // 专门处理html文件中的img图片（负责引入img，从而能被asset资源模块进行图片资源处理）
                test: /\.(html)$/,
                // 需要安装html-loader 命令: npm i html-loader -D
                loader:'html-loader'
            },

            {
                // 处理字体文件资源
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                type:"asset",
                //解析
                parser: {
                    // 转base64的条件
                    // 字体文件大小如果小于1kb,就会被base64处理
                    // base64的优点:减少请求数量,减轻服务器压力
                    // base64的缺点:图片体积会更大,文件请求速度更慢
                    dataUrlCondition: {
                        maxSize: 1 * 1024, // 1kb
                    }
                },
                generator:{ 
                    //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                    // 给字体文件进行重命名 [hash:10]取字体文件的hash的前10为,[ext]取文件原来的扩展名
                    // [name]表示原来的文件名字
                    filename:"fonts/[name]_[hash:10][ext]",
                    //打包后对资源的引入，文件命名已经有/fonts了
                    publicPath:"./"
                }
            },


            {
                // 处理js文件的loader
                test: /\.js$/,
                // exclude 表示哪些目录中的.js文件不要进行 babel-loader
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            }


        ]
    },

    // 插件 plugin
    // plugins的配置
    plugins:[
        // 详细plugins的配置
        // plugins插件的配置
        
        // 使用html-webpack-plugin插件,默认会创建一个空的HTML文件,"自动引入"打包输出的所有资源资源,比如js,css等
        new HtmlWebpackPlugin({
            // template可以指定复制 "./src/index.html" 的页面结构 , 并自动引入打包输出的所有资源资源
            // 特别说明,  这个src目录下的inex.html是需要我们自己手动创建的
            template:"./src/index.html",
            
            // inject  自动引入js所在位置
            inject: "body",

            // 通过minify属性可以压缩html文件
            /* minify:{
                // 移出注释
                removeComments:true,
                // 移除空格
                collapseWhitespace:true
            }, */

            // 设置favicon.icon文件,即是网站小图标
            favicon: "./src/favicon.ico"

            // filename: 输出模板名称, 默认为index.html
            // filename: "a.html"
        })
    ],

    // 打包模式 mode
    // 开发模式
    mode:"development",
    // mode:"production",

    // devServer的配置
    devServer: {
        // 项目构建后的路径
        static: {
            directory: resolve(__dirname, 'build'),
        },
        // 启动gzip压缩 可以加速
        compress: true,
        // 端口号
        port: 9000,
        // 自动打开系统默认浏览器
        open:true
    },
}